<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>002js简介和体验</title>
    <style>
        .pink {
            background-color: pink;
        }
    </style>
</head>

<body>
    <h1>002js简介和体验</h1>
    <div>
        <button class="pink">button</button>
        <button>button</button>
        <button>button</button>
        <button>button</button>
    </div>
    <script>
        /*
            1 js是什么？
                js是一门动态的，弱类型的，解释型的浏览器端脚本语言。
        */

        /*
            2 js可以做什么？
                页面特效（监听用户的行为并对此让网页作出对应的反馈）
                表单验证
                数据交互（从后端获取数据，渲染到网页内）
                服务端编程（nodejs）
        */

        /*
            3 js的组成部分
                js包含ECMAScript，BOM，DOM
        */

        // 4 文档查询：MDN

        // 案例：原生js实现tab切换
        let oBtns = document.querySelectorAll('button')
        for (let i = 0; i < oBtns.length; i++) {
            /* oBtns[i].onclick = function () {
                document.querySelector('.pink').className = ''
                this.className = 'pink'
            } */
            oBtns[i].addEventListener('click', function () {
                // 移除已经是粉色按钮上的pink类名
                document.querySelector('.pink').className = ''
                // 给当前点击的该按钮添加pink类名
                this.className = 'pink'
            })
        }
        // 思路：拿到所有按钮，遍历所有按钮，遍历的同时给每个按钮绑定点击事件。
    </script>
</body>

</html>